<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="pu" uri="/WEB-INF/tld/pageutil.tld"%>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt-rt"%>
<script type="text/javascript" charset="UTF-8" src="/genJS/yaodian_zipcode.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.ext.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.templating.js"></script>
<script>
$(function(){
	$('#current_location').html(' > 换货申请');
});
</script>
<c-rt:set var="sopHql">
from ServiceOrderProduct where orderId=? and orderProdId=?
</c-rt:set>
<c-rt:set var="paramsSop"
	value="${pu:addToList('parasSop', param.orderId)}" />
<c-rt:set var="paramsSop"
	value="${pu:addToList('parasSop', pu:parseLong(param.orderProdId))}" />
<c-rt:set var="serviceOrderProduct"
	value="${pu:queryByHql(sopHql, paramsSop, null)}" />

<!-- content start -->
<div class="content mb-od-dtl"><c-rt:if
	test="${empty serviceOrderProduct}">

	<c-rt:set var="order"
		value="${pu:get('com.yaodian100.ec.order.entity.Orders', param.orderId)}" />
	<c-rt:set var="orderProduct"
		value="${pu:get('com.yaodian100.ec.order.entity.OrderProduct', pu:parseLong(param.orderProdId)) }" />
	<c-rt:set var="paramsDetail"
		value="${pu:addToList('parasDetail', pu:parseLong(param.orderProdId))}" />
	<c-rt:set var="orderProductDetails"
		value="${pu:queryByHql('from OrderProductDetail where orderProdId=?', paramsDetail, null)}" />
	<script>
	$(function() {
		$('.msg').hide();
		$('#submit_button').click(function() {
			$('.msg').hide();
			hasError=false;
			if($('#receiverName').attr('value')==''){
				$('#receiverNameMsg').show();
				hasError=true;
			}
			if($('#province').attr('value')==''
				|| $('#city').attr('value')==''
				|| $('#district').attr('value')==''
				|| $('#receiverAddr').attr('value')==''
				|| $('#receiverZip').attr('value')==''){
				$('#addressMsg').show();
				hasError=true;
			}
			if($('#receiverMobile').attr('value')==''){
				$('#receiverMobileMsg').show();
				hasError=true;
			}
			if($('#receiverPhoneArea').attr('value')==''
				|| $('#receiverPhone').attr('value')==''
				|| $('#receiverExt').attr('value')==''){
				$('#receiverPhoneMsg1').show();
				hasError=true;
			}
			if($('#receiverPhone').attr('value').length<5
				|| $('#receiverPhone').attr('value').length>10
				|| isNaN($('#receiverPhone').attr('value'))){
				$('#receiverPhoneMsg2').show();
				hasError=true;
			}
			if($('#mainQty0').attr('value')==''){
					$('#mainQty0Msg').show();
					hasError=true;
			}
			if($('#addonQty').attr('value')==''){
					$('#addonQtyMsg').show();
					hasError=true;
			}
			if($('#quotafilledQty').attr('value')==''){
				$('#quotafilledQtyMsg').show();
				hasError=true;
			}
			if($('#reason').attr('value')==''){
				$('#reasonMsg').show();
				hasError=true;
			}
			if($('#description').attr('value')==''){
				$('#descriptionMsg').show();
				hasError=true;
			}
			if($('#accessaryDescription').attr('value')==''){
				$('#accessaryDescriptionMsg').show();
				hasError=true;
			}
			isNoSelected=true;
			<c-rt:forEach items="${orderProductDetails}" var="productDetail" varStatus="status">
			if($('#qty${status.index}').attr('value')=='1' && $('#prodSpecId${status.index}').attr('value')==''){
				$('#prodSpecId${status.index}Msg').show();
				hasError=true;
			}
			if(isNoSelected && $('#qty${status.index}').attr('value')=='0'){
				isNoSelected=true;
			}else{
				isNoSelected=false;
			}
			</c-rt:forEach>
			if(isNoSelected){
				$('#prodSpecId0Msg').show();
			}
			if(!hasError){
				document.changeProductForm.submit();
			}
			
		});
		function commonTemplate(item) {
			return "<option value='" + item.Value + "'>" + item.Text
					+ "</option>";
		}
		;
		function commonMatch(selectedValue) {
			return this.When == selectedValue;
		}
		;
		$.each(provinceArray, function(index, item) {
			$("#province").append(
					"<option value='" + item.Value + "'>" + item.Text
							+ "</option>");
		});
		jQuery("#city").cascade("#province", {
			list : cityArray,
			template : commonTemplate,
			match : commonMatch
		});
		jQuery("#district").cascade("#city", {
			list : districtArray,
			template : commonTemplate,
			match : commonMatch
		});
		$.each(provinceArray, function(index, item) {
			if (item.Value == "${order.receiverProvince}") {
				$("#province").attr("selectedIndex", index + 1);
			}
		});

		$.each(cityArray, function(index, item) {
			if (item.When == "${order.receiverProvince}") {
				$("#city").append(
						"<option value='" + item.Value + "'>" + item.Text
								+ "</option>");
			}
		});

		var newCityArray = jQuery.grep(cityArray, function(item) {
			return item.When == "${order.receiverProvince}";
		});
		$.each(newCityArray, function(index, item) {
			if (item.Value == "${order.receiverCity}") {
				$("#city").attr("selectedIndex", index + 1);
			}
		});

		$.each(districtArray, function(index, item) {
			if (item.When == "${order.receiverCity}") {
				$("#district").append(
						"<option value='" + item.Value + "'>" + item.Text
								+ "</option>");
			}
		});

		newDistrictArray = jQuery.grep(districtArray, function(item) {
			return item.When == "${order.receiverCity}";
		});
		$.each(newDistrictArray, function(index, item) {
			if (item.Value == "${order.receiverArea}") {
				$("#district").attr("selectedIndex", index + 1);
			}
		});
	});
</script>
	<form name="changeProductForm" method="post"
		action="<c-rt:url value="/member/serviceOrder/changeProduct.do"/>">
		<input type="hidden" name="serviceId" value="${serviceOrder.serviceId }"/>
		<input type="hidden" name="orderId" value="${order.orderId }" /> 
		<input type="hidden" name="orderProdId" value="${orderProduct.orderProdId }" />
	<input type="hidden" name="prodTp" value="${orderProduct.prodTp }" /> 
	<input type="hidden" name="token" value="${pu:getToken() }"/>
	<input type="hidden" name="srcType" value="2"/>
	<!-- 我的訂單 -->
	<p align="center"><img src="/images/step_change.gif"
		alt="换货流程教学图" style="margin-bottom: 7px;" /></p>
	<p class="a-function"><a href="###">换货政策</a> | <a href="###">换货流程</a></p>
	<h2>我要换货</h2>
	<!-- 訂單資訊 -->
	<h3>订单资讯</h3>
	<div class="d-show">
	<ul>
		<li class="w-1of2"><strong>订单编号：</strong>${order.orderId }</li>
		<li class="w-1of2"><strong>订购时间：</strong></strong><fmt-rt:formatDate pattern="yyyy/MM/dd HH:mm" value="${order.createDate }"/></li>
		<li class="w-1of2"><strong>订购人：</strong>${order.memberName }</li>
		<li class="w-1of2"><strong>支付方式：</strong>${pu:menuOption('order.paymentTp', order.paymentTp) }<input
			type="hidden" name="paymentTp" value="${order.paymentTp}" /></li>
	</ul>
	</div>
	<!-- 訂單資訊 --> <!-- 換货資訊 -->
	<h3>换货资讯<span>填写换货单信息缺失，可能造成我们无法为您办理退货事宜。</span></h3>

	<c-rt:set var="paramsDetail" value="${null }" /> 
	<c-rt:set var="parasDetail" value="${null}" /> 
	<c-rt:set var="paramsDetail" value="${pu:addToList('parasDetail', orderProduct.orderProdId)}" /> 
	<c-rt:set var="orderProductDetails" value="${pu:queryByHql('from OrderProductDetail where orderProdId=? order by detailTp asc, prodSpecId asc', paramsDetail, null)}" />
	<c-rt:set var="isMain" value="false" /> 
	<c-rt:set var="isPrebuy" value="false" /> 
	<c-rt:set var="isPresent" value="false" /> 
	<c-rt:set var="isAddon" value="false" /> 
	<c-rt:set var="isCampaign" value="false" /> 
	<c-rt:set var="isQuotafilled" value="false" /> 
	<c-rt:set var="isCombo" value="false" />
	<c-rt:forEach items="${orderProductDetails}" var="productDetail" varStatus="index">
        		<c-rt:choose>
        			<c-rt:when test="${productDetail.detailTp=='0'}">
        				<c-rt:set var="isMain" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='1'}">
        				<c-rt:set var="isPrebuy" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='2'}">
        				<c-rt:set var="isPresent" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='3'}">
        				<c-rt:set var="isAddon" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='4'}">
        				<c-rt:set var="isCampaign" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='5'}">
        				<c-rt:set var="isQuotafilled" value="true"/>
        			</c-rt:when>
        			<c-rt:when test="${productDetail.detailTp=='6'}">
        				<c-rt:set var="isCombo" value="true"/>
        			</c-rt:when>
        		</c-rt:choose>
        	</c-rt:forEach> 
	<div class="d-show">
	<p style="margin: 0 0 -10px 1.25em;"><strong>換货商品数量与属性：</strong></p>
	<table class="tb-2">
		<thead>
			<tr>
				<th>商品名称</th>
				<th width="120">原商品属性</th>
				<th width="120">选择商品换货数量</th>
				<th width="120">选择欲换货属性</th>
			</tr>
		</thead>
		<tbody>
			<c-rt:forEach items="${orderProductDetails}" var="productDetail" varStatus="status">
			<tr>
				<td>
				<p>${productDetail.prodName }<input type="hidden" name="orderDetailId" value="${productDetail.orderDetailId }"/></p>
				</td>
				<td>${productDetail.prodSpecName }</td>
				<td><select name="qty" id="qty${status.index }">
					<option value="0">0</option>
					<option value="1">1</option>
				</select></td>
				<td><select name="prodSpecId" id="prodSpecId${status.index }">
					<option value="">请选择</option>
					<c-rt:set var="paramsProdSpecs" value="${null }"/>
					<c-rt:set var="parasProdSpecs" value="${null}"/>
					<c-rt:set var="paramsProdSpecs"	value="${pu:addToList('parasProdSpecs', productDetail.prodId)}" />
					<c-rt:set var="hqlProdSpecs">
	              from Specification where productId=?
	              </c-rt:set>
					<c-rt:set var="prodSpecs"
						value="${pu:queryByHql(hqlProdSpecs, paramsProdSpecs, null)}" />
					<c-rt:forEach items="${prodSpecs}" var="spec">
						<option value="${spec.specificationId }"
							<c-rt:if test="${spec.specificationId == productDetail.prodSpecId}">selected="selected"</c-rt:if>>${spec.specificationName
						}</option>
					</c-rt:forEach>
				</select> <span style=""><span class="msg rn" id="prodSpecId${status.index}Msg">请选择属性</span></span></td>
			</tr>
			
			</c-rt:forEach>
		</tbody>
	</table>
	<ul class="li-note">
		<li>‧如果成套商品中有部分商品存在质量问题，在办理换货时，亦必须提供成套商品。</li>
		<li>‧同一商品仅有一次退换货机会，请慎选您所要換货的数量。<span class="txt-gy">（例：同一商品购买5件，退2件后，剩餘3件将无法再申请退、换货。）</span></li>
	</ul>
	<ul>
		<li class="w-1of1">
		<div><strong><span class="txt-rd">*</span> 换货原因：</strong></div>
		<div><select name="reason" id="reason">
			<option value="">请选择原因</option>
			<option>新品瑕疵/故障</option>
			<option>商品数量有错</option>
			<option>商品属性不符</option>
			<option>更换商品颜色</option>
			<option>更换商品尺寸</option>
			<option>收到非新品商品</option>
			<option>缺少配件/赠品</option>
			<option>其他</option>
		</select><span style=""><span class="msg rn" id="reasonMsg">请选择换货原因</span></span></div>
		</li>
		<li class="w-1of1 return-txt">
		<div><strong><span class="txt-rd">*</span> 换货问题描述：</strong><br />
		</div>
		<div><textarea name="description" id="description"></textarea><span
			style=""><span class="msg rn" id="descriptionMsg">请输入换货问题描述</span></span></div>
		</li>
		<li class="w-1of1 return-txt">
		<div><strong><span class="txt-rd">*</span> 配件贈品狀態：</strong><br />
		</div>
		<div><input class="return-txtfild" type="text" name="accessaryDescription"
			id="accessaryDescription" /> <span style=""><span class="msg rn" id="accessaryDescriptionMsg">请输入配件赠品状态</span><br />
		</span><br />
		<span class="txt-rd">请註明配件及赠品状态是否完整，若有缺少或损坏，将不予受理退货或须部份赔偿。(若无配件请填"无")</span>
		</div>
		</li>
	</ul>
	</div>

	<%--
      <div class="d-show"> 
        <p style="margin:0 0 -10px 1.25em;"><strong>換货商品数量与规格：</strong></p> 
        <table class="tb-2"> 
          <thead> 
            <tr> 
              <th>商品名称</th> 
              <th>选择商品换货数量</th> 
              <th>选择欲换货规格</th> 
            </tr> 
          </thead> 
          
              <tr> 
              <td class="boder-w" colspan="3"><p>${orderProduct.prodName }</p>
              <table width="100%">
              <tbody> 
              <c-rt:forEach items="${orderProductDetails }" var="productDetail">
	              <tr>
	              <td class="boder-w"> 
	                • ${productDetail.prodSpecName }<input type="text" name="orderDetailId" value="${productDetail.orderDetailId }"/></td> 
	              <td class="boder-w"><select name="qty" id="qty"><option value="0">0</option><option value="1">1</option></select></td> 
	              <td class="boder-w">
	              
	              <select name="prodSpecId" id="prodSpecId">
	              <option value="">请选择</option>
	              <c-rt:set var="paramsProdSpecs" value="${pu:addToList('parasProdSpecs', productDetail.prodId)}"/>
	              <c-rt:set var="hqlProdSpecs">
	              from Specification where productId=?
	              </c-rt:set>
	              <c-rt:set var="prodSpecs" value="${pu:queryByHql(hqlProdSpecs, paramsProdSpecs, null)}"/>
	              <c-rt:forEach items="${prodSpecs}" var="spec">
	              	<option value="${spec.specificationId }" <c-rt:if test="${spec.specificationId == productDetail.prodSpecId}">selected="selected"</c-rt:if>>${spec.specificationName }</option>
	              </c-rt:forEach>
	              </select>
	              
	              </td> 
	              </tr> 
	              <c-rt:set var="paramsProdSpecs" value="${null }"/>
	              <c-rt:set var="parasProdSpecs" value="${null}"/>
              </c-rt:forEach>
              </tbody> 
              </table>
              </td>
              </tr>
          
        </table> 
        <ul> 
          <li class="w-1of1"><strong>换货原因：</strong><select name="select" id="select"><option>请选择原因</option><option>新品瑕疵/故障</option><option>商品数量有错</option><option>商品规格不符</option><option>更换商品颜色</option><option>更换商品尺寸</option><option>收到非新品商品</option><option>缺少配件/赠品</option><option>其他</option></select></li> 
          <li class="w-1of1 return-txt"><div><strong><span class="txt-rd">*</span> 异常状态描述：</strong><br /><i>(必填!请详述)</i></div><div><textarea name="textarea" id="textarea"></textarea></div></li> 
          <li class="w-1of1 return-txt"> 
          	<div><strong><span class="txt-rd">*</span> 配件贈品狀態：</strong><br /><i>(必填!请详述)</i></div> 
            <div> 
            	<input class="return-txtfild" type="text" name="textfield" id="textfield" /><br /> 
                <span class="txt-rd">请註明配件及赠品状态是否完整，若有缺少或损坏，将不予受理退货或须部份赔偿。(若无配件请填"无")</span> 
            </div> 
          </li> 
        </ul> 
      </div> 
      --%> <!-- 換货資訊 --> <!-- 收件資訊 -->
	<h3>取货资讯<span>填写换货单信息缺失，可能造成我们无法为您办理退货事宜</span></h3>
	<div class="d-show">
	<ul>
		<li class="w-1of1">
		<div><strong style="padding-left: 2.2em;">姓名：</strong></div>
		<div><input type="text" name="receiverName" id="receiverName"
			value="${order.memberName }" size="10" /><br />
		<span class="msg rn" id="receiverNameMsg">请输入联络人姓名</span></div>
		</li>
		<li class="w-1of1 my-listadd">
		<div><strong>联络地址：</strong></div>
		<div>省份：<select id="province" name="receiverProvince"
			class="c-prov">
			<option value="">== 选择省 ==</option>
		</select> 市：<select name="receiverCity" id="city">
			<option value="">== 选择城市 ==</option>
		</select> 区：<select name="receiverArea" id="district">
			<option value="">== 选择地区 ==</option>
		</select> <br />
		邮编：<input type="text" name="receiverZip" id="receiverZip"
			value="${order.receiverZip}" /> 街道：<input size="50"
			name="receiverAddr" value="${order.receiverAddr }" /> <span id=33
			style="display: block"><span class="msg rn" id="addressMsg">请输入完整的联络地址</span></span>
		</div>
		</li>
		<li class="w-1of1">
		<div><strong>手机電話：</strong></div>
		<div><input type="text" name="receiverMobile"
			id="receiverMobile" value="${order.receiverMobile }" size="10" /><br />
		<span class="msg rn" id="receiverMobileMsg">手机号码长度最多十一位，限数字。</span></div>
		</li>
		<li class="w-1of1">
		<div><strong>固定電話：</strong></div>
		<div><input type="text" name="receiverPhoneArea"
			id="receiverPhoneArea" value="${order.receiverPhoneArea }" size="3" />-<input
			type="text" name="receiverPhone" id="receiverPhone"
			value="${order.receiverPhone }" size="7" />-分机<input type="text"
			name="receiverExt" id="receiverExt" value="${order.receiverExt }"
			size="4" /><br />
		<span class="msg rn" id="receiverPhoneMsg1">请至少填写一组电话</span><span class="msg rn" id="receiverPhoneMsg2">电话号码长度最少五位，最多十位，限数字。</span></div>
		</li>
	</ul>
	</div>
	<!-- 收件資訊 -->
	<p align="center"><a href="javascript:;" id="submit_button" class="btn-mid">确认提交</a>
	<a  href="javascript:;" onclick="document.returnProductForm.reset()" class="btn-mid-gy">重填</a></p>
	<!-- 注意事项 -->
	<div class="txt-note">
	<p><strong>注意事项：</strong></p>
	<ul>
		<li>1.进行商品的换货时，请於<span class="txt-rd">收到商品后15日内</span>，填写换货申请表且将商品寄出，您的申请才被视为有效。</li>
		<li>2.换货時必须确保產品同原包装且配件完整，<span class="txt-rd">连同「发票」及「换货明細」</span>，寄至：102613
		上海市大兴区芦花路1号 耀点科技有限公司 。</li>
		<li>3.若您对于换货方式有任何疑问，请先参考<a href="@@@@@" class="a-blue">换货说明</a>，或请利用联络<a
			class="a-blue" href="@@@@">客服中心，</a>我们将在1~2日内尽速以email方式回覆您。</li>
	</ul>
	</div>
	<!-- 注意事项 --> <!-- 我的訂單 --></form>
</c-rt:if> <c-rt:if test="${!empty serviceOrderProduct}">
   已退换货
   </c-rt:if></div>

<!-- content end -->
